import Layer from '../../core/Layer';
import Event from '../../event/Event';
import Line from '../../base/Line';
import Text from '../../base/Text';
import Rectangle from '../../base/Rectangle';
import Point from '../../core/Point';

export default class extends Layer {
    constructor(canvas, style, data = []) {
        super(canvas, style);
        this.data = data;
        this.style = style;
        this.start = style.start || 0;
        this.end = style.end || 0;
        this.xStep = style.xStep || 0;
        this.yStep = style.yStep || 0;
        this.fontColor = style.fontColor || this.color;
        this.xFormatter = style.xFormatter;
        this.yFormatter = style.yFormatter;
        this.crossX = new Line(this.canvas, {
            lineWidth: 1,
            from: new  Point(0, 0),
            to: new Point(this.width, 0),
            color: this.color,
            left: 0,
            bottom: 0,
            lineDash: [4, 3, 4],
            visible: false,
        });
        this.crossY = new Line(this.canvas, {
            lineWidth: 1,
            from: new Point(0, 0),
            to: new Point(0, this.height),
            left: 0,
            bottom: 0,
            lineDash: [4, 3, 4],
            color: this.color,
            visible: false,
        });
        const xAlign = style.xAlign || 'bottom';
        const yAlign = style.yAlign || 'left';
        this.xTxt = new Text(this.canvas, {
            text: '',
            fontSize: style.fontSize || this.fontSize,
            fontFamily: style.fontFamily || this.fontFamily,
            color: style.fontColor || this.color,
            left: 0,
            bottom: xAlign === 'bottom' ? 5 : this.height - Number(this.fontSize) - 5,
            textAlign: 'center',
            visible: false,
            type: Text.TYPE.FILL,
        });
        this.yTxt = new Text(this.canvas, {
            text: '',
            fontSize: this.fontSize,
            fontFamily: this.fontFamily,
            color: style.fontColor || this.color,
            left: yAlign === 'left' ? 5 : this.width - 5,
            textAlign: yAlign,
            bottom: 0,
            visible: false,
            type: Text.TYPE.FILL,
        });
        this.xRect = new Rectangle(this.canvas, {
            width: this.xTxt.width + 10,
            height: this.xTxt.height + 10,
            color: this.color,
            left: 0,
            bottom: xAlign === 'bottom' ? 0 : this.height - Number(this.fontSize) - 10,
            visible: false,
            textAlign: 'center',
            type: Rectangle.TYPE.FILL,
        });
        this.yRect = new Rectangle(this.canvas, {
            width: this.yTxt.width + 10,
            height: this.yTxt.height + 10,
            color: this.color,
            left: yAlign === 'left' ? 0 : this.width,
            textAlign: yAlign,
            visible: false,
            type: Rectangle.TYPE.FILL,
        });
        this.addEventListener(Event.EVENT_LONG_CLICK, (e) => {
           this. flag = true;
           this.onCrossStart && this.onCrossStart();
           const { x = 0, y = 0  } = e.eventPoint;
           this.showCross(e.eventPoint);

        });
        this.addEventListener(Event.EVENT_LONG_TAP, (e) => {
            this.flag = true;
            this.onCrossStart && this.onCrossStart();
            const { x = 0, y = 0  } = e.eventPoint;
            this.showCross(e.eventPoint);

        });
        this.addEventListener(Event.EVENT_MOUSE_MOVE, (e) => {
            if (this.flag) {
                this.showCross(e.eventPoint);
            }
            const { x = 0 } = e.eventPoint;
            const { start, end, xStep, data = [] } = this;
            const posIndex = Math.round((x - this.left) / xStep) + start;
            if (posIndex < end) {
                this.onCrossing && this.onCrossing(data[posIndex], posIndex - start);
            }

        });
        this.addEventListener(Event.EVENT_TOUCH_MOVE, (e) => {
            if (this.flag) {
                this.showCross(e.eventPoint);
            }
            const { x = 0 } = e.eventPoint;
            const { start, end, xStep, data = [] } = this;
            const posIndex = Math.round((x - this.left) / xStep) + start;
            if (posIndex < end) {
                this.onCrossing && this.onCrossing(data[posIndex], posIndex - start);
            }
        });
        this.addEventListener(Event.EVENT_MOUSE_OUT, (e) => {
            if (this.flag) {
                this.flag = false;
                this.onCrossEnd && this.onCrossEnd();
                this.setVisiable(false);
                this.canvas.paint();
            }
        });
        this.addEventListener(Event.EVENT_MOUSE_UP, (e) => {
           if (this.flag) {
               this.flag = false;
               this.onCrossEnd && this.onCrossEnd();
               this.setVisiable(false);
               this.canvas.paint();
           }
        });
        this.addEventListener(Event.EVENT_TOUCH_END, (e) => {
            if (this.flag) {
                this.flag = false;
                this.onCrossEnd && this.onCrossEnd();
                this.setVisiable(false);
                this.canvas.paint();
            }
        });
        this.addChild(this.xRect, this.yRect, this.crossX, this.crossY, this.xTxt, this.yTxt);
    }

    showCross(point) {
        const { x = 0, y = 0  } = point;
        const { start, end, xStep, yStep, data = [], min, baseY } = this;
        const posIndex = Math.round((x - this.left) / xStep) + start;
        if (posIndex <= end) {
            const xLabel = this.xFormatter ? this.xFormatter(data[posIndex].datetime) : data[posIndex].datetime;
            this.xTxt.text = xLabel;
            const yValue = (y - this.bottom - baseY) / yStep + min;
            const yLabel = this.yFormatter ? this.yFormatter(yValue) : yValue;
            this.yTxt.text = yLabel;
            this.crossY.left = x - this.left;
            this.crossX.bottom = y - this.bottom;
            this.yRect.width = this.yTxt.width + 10;
            this.yRect.height = this.yTxt.height + 10;
            this.xRect.width = this.xTxt.width + 10;
            this.xRect.height = this.xTxt.height + 10;
            this.xRect.left = x - this.left;
            this.xRect.bottom = this.xRect.height / 2;
            this.xTxt.left = x - this.left;
            this.yRect.bottom = y - this.bottom - this.yRect.height / 2;
            this.yTxt.bottom = y - this.bottom + 5 - this.yRect.height / 2;
            this.setVisiable(true);
            console.log('cross====>', this);
        } else {
            this.setVisiable(false);
        }
        this.canvas.paint();
    }

    setVisiable(bool) {
        this.crossX.visible = bool;
        this.crossY.visible = bool;
        this.xTxt.visible = bool;
        this.yTxt.visible = bool;
        this.xRect.visible = bool;
        this.yRect.visible = bool;
    }

}
